<template>
  <div class="cityListWrapOuter" v-if="isShowPanel">
    <div class="cityListWrapClass">
      <city-list
        :letters="letters"
        :hotCitys="hotCitys"
        :directlyCitys="directlyCitys"
        :cityList="cityList"
      ></city-list>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import CityList from "@/components/common/CityList.vue"; // @ is an alias to /src
import { cityListServer } from "@/api/installServer";
// import MapCommon from "@/util/MapCommon";
@Component({
  components: {
    CityList
  },
  // mixins: [MapCommon]
})
export default class CityListWrap extends Vue {
  private letters: any = [
    "A",
    "F",
    "G",
    "H",
    "J",
    "L",
    "N",
    "Q",
    "S",
    "T",
    "X",
    "Y",
    "Z"
  ];
  private hotCitys: any = [];
  private directlyCitys: any = [];
  private cityList: any = [];
  private allList: any = [];
  // private getComponent() {
  //   const self: any = this;
  //   const modules = self.$ioc.resolve("GISModules-map");
  //   const component = modules.eventSituation.getComponent("compresituation");
  //   return component;
  // }

  get isShowPanel() {
    return this.$store.state["cityListModule" as any].isShowCityListWrap;
  }
  // 监听外部code改变
  get outCodeChange() {
    return this.$store.state["cityListModule" as any].outChangeid;
  }

  @Watch("outCodeChange")
  private watchCount1(newVal: any ) {
    const id: string = newVal;
    if(id){
      const arr: any[] = this.allList.filter((l: any) => l.id === id);
      const item: any = arr[0];

      // this.$store.dispatch('cityListModule/outChangeidEmit',newid);
      this.$store.dispatch("cityListModule/checkedCityObjEmit", item);
      this.$store.commit("ZhtsModule/setDistrict", item);
      this.$store.dispatch("cityListModule/isShowCityListWrapEmit", false);
    }
  }

  private requestCityListDatas() {
    cityListServer.getCityListDatas().then((res: any) => {
      this.hotCitys = res.data.hotCitys;
      this.directlyCitys = res.data.directlyCitys;
      const tempArr = res.data.data;
      this.allList = tempArr;
      this.letters.forEach((item: any) => {
        this.cityList.push({
          letter: item,
          list: []
        });
      });
      this.cityList.forEach((item: any) => {
        tempArr.forEach((ele: any) => {
          if (item.letter === ele.letter && ele.parentId === tempArr[0].id) {
            ele.children = [];
            item.list.push(ele);
          }
        });
      });
      tempArr.forEach((item: any) => {
        this.cityList.forEach((ele: any) => {
          ele.list.forEach((element: any) => {
            if (element.id === item.parentId) {
              element.children.push(item);
            }
          });
        });
      });
    });
  }
  // private fatherMethodOther(item: any) {
  //   // 回調傳city參數
  //   // const code: string = item.id;
  //   // this.getComponent().addSickMap(code);
  // }
  private created() {
    this.requestCityListDatas();
  }
}
</script>
<style lang="less" scoped>
.cityListWrapOuter {
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 10;
  width: 445px;
  height: 590px;
  background: url("../../assets/img/zhts/cityList-bg.png") no-repeat center
    center;
  background-size: 100% 100%;
  //  border: 1px solid red;
  .cityListWrapClass {
    width: 413px;
    height: 540px;
    margin-left: 15px;
    margin-top: 20px;
    //   border: 1px solid yellow;
  }
}
</style>
